<template>
  <div>
    <div class="main">
      <eagle-input
        label="设备名称"
        v-model="form.EquipmentName"
        name="EquipmentName"
        required
        isInputText
      ></eagle-input>
      <eagle-input
        label="设备编号"
        v-model="form.EquipmentNo"
        name="EquipmentNo"
        required
        isInputText
      ></eagle-input>
      <eagle-input
        name="calendar"
        :value="form.EquipmentTypeName"
        label="设备类型"
        placeholder="请选择"
        readonly
        required
        islink
        @click="
          handleDialog(
            'EquipmentTypeParams',
            form.EquipmentType,
            'EquipmentTypeName',
            'EquipmentType'
          )
        "
      >

      </eagle-input>
      <eagle-input
        label="规格型号"
        v-model="form.SpecificationType"
        name="SpecificationType"
        isInputText
      ></eagle-input>
      <eagle-input
        label="安装/使用位置"
        v-model="form.Location"
        name="Location"
        isInputText
      ></eagle-input>
      <eagle-input
        name="calendar"
        :value="form.EquStatusName"
        label="设备状态"
        readonly
        placeholder="请选择"
        required
        islink
        @click="
          handleDialog(
            'EquipmentStatusParams',
            form.EquStatus,
            'EquStatusName',
            'EquStatus'
          )
        "
      ></eagle-input>
      <eagle-input
        label="设备代码"
        v-model="form.EquipmentWord"
        name="EquipmentWord"
        isInputText
      ></eagle-input>
      <eagle-input
        name="calendar"
        :value="form.EquManagerChnName"
        label="设备管理人"
        readonly
        placeholder="请选择"
        required
        islink
        @click="userChooseDialogShow = true"
      ></eagle-input>
      <eagle-date
        label="购置/生产日期"
        :date.sync="form.BuyDay"
        :IsCurrentTime="false"
      ></eagle-date>
      <eagle-date
        label="停用/报废日期"
        :date.sync="form.StopDay"
        :IsCurrentTime="false"
      ></eagle-date>
      <eagle-input
        label="制造商" v-model="form.MadeBusiness" name="MadeBusiness" isInputText
      ></eagle-input>
      <eagle-date
        label="注册登记日期"
        :date.sync="form.RegisterDay"
        :IsCurrentTime="false"
      ></eagle-date>
      <eagle-input
        label="使用登记证编号"
        v-model="form.EquRegistrationWord"
        name="EquRegistrationWord"
        isInputText
      ></eagle-input>
      <eagle-input
        name="calendar"
        :value="form.OperateOrgName"
        label="部门"
        readonly
        placeholder="请选择"
        required
        islink
        @click="deptmentShow = true"
      ></eagle-input>
      <eagle-input name="checkbox" label="需要复检">
        <template #input>
          <van-checkbox v-model="form.IsNeedCheck" shape="square" @change="checkChange" />
        </template>
      </eagle-input>
      <!-- <van-field class="input_text" name="checkbox" label="需要复检">
        <template #input>
          <van-checkbox v-model="form.IsNeedCheck" shape="square" />
        </template>
      </van-field> -->
      <eagle-date
        v-if="addCheckShow"
        label="最近检验日期"
        :IsCurrentTime="false"
        :date.sync="form.CheckDay">
      </eagle-date>
      <eagle-date 
        v-if="addCheckShow"
        label="下次检验日期"
        :IsCurrentTime="false"
        :date.sync="form.NextCheckDay">
      </eagle-date>
      <eagle-input
        v-if="editCheckShow && Boolean(form.CheckDay)"
        label="最近检验日期"
        v-model="form.CheckDay"
        name="CheckDay"
        readonly
      ></eagle-input>
      <eagle-input
        v-if="editCheckShow && Boolean(form.NextCheckDay)"
        label="下次检验日期"
        v-model="form.NextCheckDay"
        name="NextCheckDay"
        readonly
      ></eagle-input>
      <div class="btn_submit">
        <eagle-button block type="info" @click="submit()"> 保存 </eagle-button>
      </div>
    </div>
    <van-dialog
      v-model="equpTypeShow"
      v-if="equpTypeShow"
      title="请选择"
      show-cancel-button
      :showConfirmButton="false"
      :showCancelButton="false"
      :closeOnClickOverlay="true"
    >
      <eagle-form>
        <van-field class="input_text" name="radio" label="">
          <template #input>
            <van-radio-group
              v-model="radio"
              @change="radioChange"
              direction="horizontal"
            >
              <template v-for="(item, index) in selectList">
                <van-radio :name="item.ID" :key="index">{{
                  item.Name
                }}</van-radio>
              </template>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px"></div>
      </eagle-form>
    </van-dialog>

    <user-choose-dialog
      :tagData="userTagData"
      :isMulti="true"
      @callback="onUserCallback"
      :show.sync="userChooseDialogShow"
    >
    </user-choose-dialog>

    <deptment-choose
      :show.sync="deptmentShow"
      :selectedValue="form.OperateOrgCode"
      @callback="_chooseLocationItem"
      :isMulti="false"
    >
    </deptment-choose>
  </div>
</template>

<script>
import { formatDate, getDate } from "@/utils/getDate";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
import { mapGetters } from "vuex";
export default {
  components: { UserChooseDialog,DeptmentChoose },
  computed: {
    ...mapGetters(["userName", "chnName"]),
  },
  data() {
    return {
      menuList: [],
      mobile: "",
      message: "",
      radio: "1",
      checkbox: false,
      equpTypeShow: false,
      checkboxGroup: [],
      value: "",
      distList: {},
      selectList: [],
      form: {},
      selectName: "",
      selectKey: "",
      codes: "",
      userChooseDialogShow: false,
      userTagData: [],
      deptmentShow:false,
      editCheckShow:false,
      addCheckShow:false,
    };
  },
  created() {
    if (this.$route.query.equipmentCode) {
      this.getDetail(this.$route.query.equipmentCode);
    } else {
      this.form.EquStatusName = '在用'
      this.form.EquStatus = '1';
      this.form.EquManagerChnName = this.chnName;
      this.form.EquManagerUserName = this.userName;
    }
    this.getDistList();
  },
  activated() {
    // if (this.$route.params.departId) {
    //   this.form.OperateOrgName = this.$route.params.departName;
    //   this.form.OperateOrgCode = this.$route.params.departId;
    // }
    // if (this.$route.params.userlist) {
    //   const userlist = this.$route.params.userlist;
    //   let EquManagerChnName = [];
    //   let EquManagerUserName = [];
    //   userlist.forEach((item) => {
    //     EquManagerChnName.push(item.name);
    //     EquManagerUserName.push(item.code);
    //   });
    //   this.form.EquManagerChnName = EquManagerChnName.join(",");
    //   this.form.EquManagerUserName = EquManagerUserName.join(",");
    // }
  },
  methods: {
    radioChange(names) {
      let select = this.selectList.filter((item) => item.ID == names);
      this.form[this.selectName] = select[0].Name;
      this.form[this.selectKey] = select[0].ID;
      this.equpTypeShow = false;
    },
    handleShow(name) {
      this.showCalendar = true;
      this.selectKey = name;
    },
    getDistList() {
      let _this = this;
      _this.$axios
      .get("/EquEquipment/InitEntity",{params:{parentId: "MyList" }})
      .then((res)=>{
        _this.distList = res.data;
      })
    },
    getDetail(equipmentCode) {
      let _this = this;
      _this.$axios
      .get("/EquEquipment/GetDetailEquipment",{params:{equipmentCode: equipmentCode}})
      .then((res)=>{
        _this.form = res.data;
        _this.form.BuyDay = getDate(res.data.BuyDay);
        _this.form.StopDay = getDate(res.data.StopDay);
        _this.form.CheckDay = getDate(res.data.CheckDay);
        _this.form.NextCheckDay = getDate(res.data.NextCheckDay);
      })
    },
    handleDialog(keyName, val, name, code) {
      this.selectList = [];
      this.selectList = this.distList[keyName];
      this.radio = val;
      this.selectName = name;
      this.selectKey = code;
      this.equpTypeShow = true;
    },
    _chooseLocationItem(item) {
      this.form.OperateOrgName = item.name;
      this.form.OperateOrgCode = item.code;
    },

    submit() {
      if (!this.form.EquipmentName) {
        return this.$toast("请输入设备名称");
      }
      if (!this.form.EquipmentNo) {
        return this.$toast("请输入设备编号");
      }
      if (!this.form.EquipmentTypeName) {
        return this.$toast("请输入设备类型");
      }
      if (!this.form.EquStatusName) {
        return this.$toast("请输入设备状态");
      }

      if (!this.form.OperateOrgName) {
        return this.$toast("请输入部门");
      }

      if (this.form.IsNeedCheck && !this.form.CheckDay &&!this.$route.query.equipmentCode) {
        return this.$toast("请输入最近检验日期");
      }
      if (this.form.IsNeedCheck && !this.form.NextCheckDay&&!this.$route.query.equipmentCode) {
        return this.$toast("请输入下次检验日期");
      }
      let _this = this;
      _this.$axios
      .post("/EquEquipment/EditEquipmen",_this.form)
      .then((res)=>{
        _this.$toast.success("保存成功");
        _this.$router.goRefresh();
      })
    },
    onUserCallback(data){
      this.userTagData = data;
      if (data) {
        const code = data.map((item) => {
          return item.code;
        });
        const name = data.map((item) => {
          return item.name;
        });
        this.form.EquManagerChnName = name.join(",");
        this.form.EquManagerUserName = code.join(",");
      }
      this.userChooseDialogShow = false;
    },
    checkChange(value){
      if(this.$route.query.equipmentCode){
        this.editCheckShow = value;
      }
      else{
        this.addCheckShow = value;
      }
    }
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
